define([
  'require',
  'jquery',
  'underscore',
  'backbone',
  'text!../../templates/todos.html',
  '../common'
], function (require, $, _, Backbone, todosTemplate, Common) {
  var TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template(todosTemplate),
    events: {
      "click .toggle": 'toggleCompleted',
      "click .destroy": 'clear',
      'dbclick label': 'edit',
      'keypress .edit': 'updateOnEnter',
      'blur .edit': 'close'
    },

    toggleCompleted: function(){
      this.model.toggle();
    },

    clear: function(){
      this.model.destory();
    },

    edit: function(){
      
    },

    initialize: function () {
      this.listenTo(this.model, 'visible', this.toggleVisible);
      this.listenTo(this.model, 'change', this.render);
      // this.listenTo(this.model, 'destory', this.remove);
    },

    toggleVisible: function () {
      this.$el.toggleClass('hidden', this.isHidden());
    },

    isHidden: function () {
      var isCompleted = this.model.get('completed');
      return (
        (!isCompleted && Common.TodoFilter === 'completed')
        || (isCompleted && Common.TodoFilter === 'active')
      )
    },

    render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass('completed', this.model.get('completed'));

      return this;
    }
  });
  return TodoView;

});